<template>
  <div class="friendcard">
    <div class="card_top">
      <div class="friend_name" v-show="!remarkState">
        <div class="name_text">{{userName}}</div>
        <!-- <img class="remark_icon" src="../../assets/icons/icon_modify_hover.png" @click="remarkName" v-if="ifFriend"/> -->
      </div>
      <div class="friend_name" v-show="remarkState">
        <input class="remark_input" type="text" placeholder="请输入备注名" v-model="remarkText"/>
        <div class="remark_confirm" @click="remarkConfirm"></div>
      </div>
      <img class="friend_avatar" :src="userImg" />
    </div>
    
    <div class="friend_line">
      <span class="friend_title">昵称</span>
      <span class="name_text">{{userName}}</span>
    </div>

    <!-- <div class="friend_line">
      <span class="friend_title">地区</span>
      <span class="name_text">广东省 广州市</span>
    </div> -->

    <div class="card_bottom">
      <div class="card_btn delete_btn" v-if="ifFriend" @click="openDeleteFriendDialog">
        <img class="card_btn_icon" src="../../assets/icons/icon_trash_up1.png" />
      </div>
      <div class="card_btn talk_btn" v-if="ifFriend" @click="transMessage">
        <img class="card_btn_icon" src="../../assets/icons/icon_talk_up.png" />
      </div>
    </div>

    <el-dialog
      :visible.sync="deleteFriendDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body>

      <div class="dialog_tips">
        <div>确认删除当前好友?</div>
        <div class="little_tips">同时删除与该好友的所有聊天记录?</div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelDeleteFriendDialog">取消</div>
        <div class="primarybtn" @click="deleteFriend">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Dialog,Message} from 'element-ui'
import {upFriendRemark,groupMemberList,chatList,delFriend} from '../../api/api'
export default {
  name:'user_info',
  data(){
    return {
      remarkState:false,
      remarkText:'',
      deleteFriendDialog:false,
      userImg:'',
      userName:'',
      userId:'',
      toId:'',
      ifFriend:false
    }
  },
  watch:{
    '$store.state.chooseCardItem'(){
      this.getItem()
    }
  },
  mounted(){
   this.getItem()
  },
  components: {
    'el-dialog':Dialog,
  },
  methods:{
    getItem(){
      if(this.$store.state.chooseCardItem){
        var item = this.$store.state.chooseCardItem
        if(item.toId&&!item.takeSendUserId){
          this.userImg = item.toUserImg
          this.userName = item.toUserName
          this.userId = item.toId
        }else if(item.sendUserId&&item.takeSendUserId===1){
          this.userImg = item.sendUserImg
          this.userName = item.sendUserName
          this.userId = item.sendUserId
        }else if(item.userId){
          this.userImg = item.userHeadImg
          this.userName = item.userName
          this.userId = item.userId
        }
      }
      this.sendUserId = this.$store.state.user.id
      this.remarkText = this.userName
      //判断卡片组件的用户是否为好友
      this.$store.state.friendList.forEach((element)=>{
          if(element.friendId==this.userId){
              this.ifFriend = true
              // throw new Error("stop");
          }
      })
    },
    openDeleteFriendDialog(){
      this.deleteFriendDialog = true
    },
    cancelDeleteFriendDialog(){
      this.deleteFriendDialog = false
    },
    remarkName(){
      this.remarkState = true
    },
    //点击发送消息按钮
    transMessage(){
      let params = {
          sendUserId:this.$store.state.user.id,
          toId:this.userId,
          globalId:0,
          pageSize:100
      }
      chatList(params)
      .then(res => {
        if(res.data&&res.data.data.list&&res.data.data.list.length!=0){
          var newChat = res.data.data.list[0]
          if(newChat.sendUserId!=this.$store.state.user.id){
            var toId = newChat.toId
            var toUserImg = newChat.toUserImg
            var toUserName = newChat.toUserName

            newChat.toId = newChat.sendUserId
            newChat.toUserImg = newChat.sendUserImg
            newChat.toUserName = newChat.sendUserName

            newChat.sendUserId = toId
            newChat.sendUserImg = toUserImg
            newChat.sendUserName = toUserName
          }
        }else{
          var newChat = {
            content: "",
            contentImg: "",
            contentVideo: "",
            globalId: "",
            id: 0,
            index: 0,
            messageId: 1,
            messageType: 1,
            mine: 0,
            readStatus: 0,
            sendTime: "",
            sendUserId: this.$store.state.user.id,
            sendUserImg: this.$store.state.user.headImg,
            sendUserName: this.$store.state.user.userName,
            serviceTime: "",
            toId: this.userId,
            toUserImg: this.userImg,
            toUserName: this.userName
          }
        }
        newChat.type = 1
        this.$store.commit('setChatList',newChat)
        this.$store.commit('chooseTalk',0)
        this.$store.commit('setNav','talk')
      })
    },
    //删除好友
    deleteFriend(){
      let params = {
          userId:this.$store.state.user.id,
          friendId:this.userId
      }
      delFriend(params)
      .then(res => {
          this.$store.commit('deleteFriend',this.userId)
          this.cancelDeleteFriendDialog()
          Message({
            message: '删除成功',
            type: 'success'
          })
      })
    },
    //确认修改备注
    remarkConfirm(){
      let params = {
          userId:this.sendUserId,
          friendId:this.userId,
          friendRemarks:this.remarkName
      }
      upFriendRemark(params)
      .then(res => {
        this.$store.commit('changeFriendRemark',{
          friendId:this.userId,
          friendRemarks:this.remarkName
        })
        this.remarkState = false
        
        if(this.$store.state.choosedGroupId){
          let params1 = {
              pageNo:1,
              pageSize:500,
              roomName:this.$store.state.groupName,
              roomId:this.$store.state.choosedGroupId
          }
          //加载群成员列表
          groupMemberList(params1)
          .then(res => {
            this.$store.commit('chooseGroup',this.$store.state.choosedGroupId)
            this.$store.commit('getGroupMembersList',res.data.data.list)
          })
        }
        Message({
          message: '修改备注成功',
          type: 'success'
        });
      })
    },
  }
}
</script>

<style scoped>
.friendcard{
  padding: 0 20px;
}
.card_top{
  padding: 22px 0;
  height: 102px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.friend_name{
  display: flex;
  align-items: center;
}
.remark_confirm{
  width: 24px;
  height: 26px;
  background: #428dfc url('../../assets/confirm.png') no-repeat 50%;
  cursor: pointer;
}
.remark_input{
  line-height: 24px;
  border: 1px solid #e7e7e7;
  background: #f5f5f5;
  border-right: 0;
  width: 136px;
  padding-left: 4px;
}
.name_text{
  color:#333;
  font-size:12px;
}
.remark_icon{
  width:20px;
  cursor: pointer;
}
.friend_avatar{
  margin-left:16px;
  width:60px;
  height: 60px;
}
.friend_line{
  margin-top:12px;
}
.friend_title{
  font-size: 12px;
  color: #999;
  padding-right: 19px;
}
.card_bottom{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin:20px 0px;
}
.card_btn{
  width:40px;
  height:40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  box-shadow: 0 3px 6px hsla(0,0%,46.7%,.16);
  cursor: pointer;
  margin-left:20px;
}
.card_btn_icon{
  width:18px;

}

.dialog_tips{
  line-height: 20px;
  padding: 46px 0 37px;
  text-align: center;
}
.little_tips{
  font-size: 12px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.btns_box .primarybtn.default{
  margin-left: 0px;
}
.btns_box .primarybtn{
  margin-left:46px;
}
</style>